<html>
<head>
    <meta charset="UTF-8">

    <style type="text/css">
        * {
            margin:0;
            padding:0;
            border:0;
        }

        #outer {
            width:300px;
            height:300px;
            background-color:red;
            margin-top:20px;
            padding: 10px;
            border: 2px solid black;
        }

        #inner {
            width:50px;
            height:50px;
            background-color:blue;
            margin-top:10px;

        }

    </style>
</head>

<body>

<div id="outer">
    <div id="inner">
    </div>
</div>

<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）。</p>
</body>
</html>